import React, {useState} from "react";
import {Button, ColorPicker} from "antd";
import useThemeStore from "@/store/ThemeStore.ts";
import {createStyles} from "antd-style";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            text-wrap: nowrap;
            flex-wrap: wrap;
        `,
    }
})

const ThemeChanger: React.FC = () => {
    const {theme, updateTheme, toDefault, defaultTheme} = useThemeStore()
    const [color, setColor] = useState<string>(theme.color)
    const styles = useStyles().styles;

    return (
        <ul className={styles.container}>
            <li>
                <Button type="primary"
                        onClick={() => {
                            updateTheme({
                                type: theme.type == "light" ? "dark" : "light",
                                color: theme.color,
                            })
                        }}
                        size="large"
                >切换主题</Button>
            </li>
            <li>
                <ColorPicker value={color}
                             onChange={(value) => {
                                 setColor(value.toHex())
                                 updateTheme({
                                     type: theme.type,
                                     color: value.toHex(),
                                 })
                             }}
                             showText={() => "主题颜色"}
                             size="large"
                />
            </li>
            <li>
                <Button
                    onClick={() => {
                        toDefault()
                        setColor(defaultTheme.color)
                    }}
                    size="large"
                >恢复默认</Button>
            </li>
        </ul>
    )
}

export default ThemeChanger
